<template>
    <!-- 首页 -->
    <div class="bg-hero h-full relative">
      <!-- 遮罩层 -->
      <div class="bg-black h-full absolute w-full opacity-70">
      </div>
      <!-- 描述 -->
      <main class="text-white z-10 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <p class="text-2xl text-center pb-4">NuanYangBadge</p>
          <p class="text-base">---长风破浪会有时，直挂云帆济沧海.</p>
          <p class="text-center pt-4"><el-button type="primary">Enter Blog</el-button></p>
      </main>
      <!-- 箭头 -->
       <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-12 h-12 block rounded-full flex justify-center items-center hover:bg-green-500 transition-all duration-700" @click="toScroll">
         <el-icon color="#fff" size="40"><ArrowDownBold /></el-icon>
       </span>
    </div>
    {{ hell }}
   <!-- 主体内容 -->
   <main class="w-4/5 m-auto flex justify-around">
      <section class="mr-5 flex-1">1</section>
      <aside class="w-1/4">2</aside>
   </main>
</template>

<script setup lang="ts">
import {ArrowDownBold} from '@element-plus/icons-vue'
   useHead({
     title: "首页"
   })
   // 跳转滚动
   const toScroll = () => {
       console.log("跳转滚动")
   }

</script>

<style scoped lang="less">
    .el-carousel__container {
      height: 100%!important;
    }
</style>